import React from 'react'
import './tabbar.css'
import { NavLink, Route, Switch, Redirect } from 'react-router-dom'
import Project from '@pages/project/project'
import Supplier from '@pages/supplier/supplier'

class Tabbar extends React.Component {

  state = {
    activeIndex: 0
  }

  componentDidMount() {
  }

  render() {
    return (
      <div className="_tabbar">
        <div className="tabbar-body">
          <Switch>
            <Route path="/tabbar/project" exact component={ Project }></Route>
            <Route path="/tabbar/supplier" exact component={ Supplier }></Route>
            <Redirect path="/tabbar" exact to="/tabbar/project"></Redirect>
            <Redirect path="*" to="/404"></Redirect>
          </Switch>
        </div>
        <div className="tabbar-footer">
          <NavLink className="tabbar-item" to="/tabbar/project" replace>
            <div className="tabbar-item-icon" style={{ backgroundImage: `url(./images/tab1.png)` }}></div>
            <div className="tabbar-item-icon active_icon" style={{ backgroundImage: `url(./images/tab1-active.png)` }}></div>
            <span className="tabbar-item-text">项目列表</span>
          </NavLink>
          <NavLink className="tabbar-item" to="/tabbar/supplier" replace>
            <div className="tabbar-item-icon" style={{ backgroundImage: `url(./images/tab2.png)` }}></div>
            <div className="tabbar-item-icon active_icon" style={{ backgroundImage: `url(./images/tab2-active.png)` }}></div>
            <span className="tabbar-item-text">供应商库</span>
          </NavLink>
        </div>
      </div>
    )
  }

}

export default Tabbar